import React,{ useEffect, useState } from 'react';

import CustHd01 from '../utils/CustHd01';
import CustInt from '../../../utils/CustInt';
import { LPassword1, LPassword2 } from '../../../../common/js/Options';
import { isEmpty } from '../../../utils/CommonUtils';
import { Toast } from 'antd-mobile';

/**
 * 修改密码
 * @param {*} props 
 */
function ModePwdTone (props) {

    const { findPwdData } = props;

    const [ newPwd, setNewPwd ] = useState('');
    const [ confirmPwd, setConfirmPwd ] = useState('');
    const [ disableBtn, setDisableBtn ] = useState(true);
    const [ currentName, setCurrentName ] = useState('');

    useEffect(() => {

        console.log('mode-password->', findPwdData);
    }, []); // eslint-disable-line react-hooks/exhaustive-deps


    const onIntFocus = (e) => {
        setCurrentName(e.target.name);
        if(newPwd && confirmPwd && newPwd === confirmPwd){
            setDisableBtn(false);
        } else {
            setDisableBtn(true);
        }
    }

    const doOption = (e, setFunc) => setFunc(e.target.value);

    const doSubmit = () => {
        if (newPwd !== confirmPwd) {
            Toast.show({ 'content' : '新密码和确认密码不一致' });
            return;
        }
    }

    return (
        <div className='w-newlay' style={{ margin: '0 .35rem' }}>
            <CustHd01 src={require('../../../../common/images/logo3.gif')} />

            <CustInt name={'newPwd'} intValue={newPwd} icon={<LPassword2/>} maxLen={18}
                currentName={currentName}
                doValid={v => !isEmpty(v)} desc='请输入新密码' setValue={v=> setNewPwd(v) }
                doFocus={(e)=> onIntFocus(e)} doChange={(e)=> doOption(e, setNewPwd)} placeholder='请输入新密码'/>

            <CustInt name={'confirmPwd'} intValue={confirmPwd} icon={<LPassword1/>} maxLen={18}
                currentName={currentName}
                doValid={v => !isEmpty(v)} desc='请输入确认密码' setValue={v=> setConfirmPwd(v) }
                doFocus={(e)=> onIntFocus(e)} doChange={(e)=> doOption(e, setConfirmPwd)} placeholder='请输入确认密码'/>

            <div className='w-next'>
                <button style={{ fontSize: '.16rem' }} children='确认修改' onClick={()=> doSubmit() }
                    className={`w-btn w-mk-btn w-wd_10 w-ris-dot2${disableBtn ? ' w-disable' : ''}`} />
            </div>
        </div>
    )

}


export default ModePwdTone;